<template>
  <p>姓氏：<input v-model="firstname" /></p>
  <p>名字：<input v-model="lastname" /></p>
  <p>姓名：{{ fullname }}</p>
  <p>姓名：<input v-model="fullname" /></p>
</template>

<script lang="ts">
import { ref, computed } from "vue";

export default {
  setup() {
    let firstname = ref("张");
    let lastname = ref("三");
    //1、只有get操作的计算属性
    /*let fullname = computed(() => {
      return firstname.value + "-" + lastname.value;
    });*/

    //2、有get与set操作的计算属性
    let fullname = computed({
      get() {
        let result = firstname.value;
        if (lastname.value) {
          result += "-" + lastname.value;
        }
        return result;
      },
      set(value) {
        const names = value.split("-");
        firstname.value = names[0];
        lastname.value = names[1] || "";
      },
    });

    return { firstname, lastname, fullname };
  },
};
</script>
<style></style>
